<!-- 车型管理 -->
<template>
  <div class="dashboard-container car-models customer-list-box">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="item">
        <div class="search-label">车型编号：</div>
        <el-input
          v-model="params.id"
          clearable
          placeholder="请输入车型编号"
          class="search-main"
        />
      </div>
      <div class="item">
        <div class="search-label">应载重量：</div>
        <el-input
          v-model="params.allowableLoad"
          clearable
          placeholder="请输入应载重量"
          class="search-main"
        />
      </div>
      <div class="item">
        <div class="search-label">应载体积：</div>
        <el-input
          v-model="params.allowableVolume"
          clearable
          placeholder="请输入应载体积"
          class="search-main"
        />
      </div>
      <div class="item">
        <div class="search-label">车辆类型:</div>
        <el-input
          v-model="params.name"
          clearable
          placeholder="请输入车辆类型"
          class="search-main"
        />
      </div>
      <div class="item">
        <el-button
          type="warning"
          @click="doSearch"
        >搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <div class="top">
      <el-button
        type="warning"
        style="margin-left: 45px"
        @click="addNewCar"
      >新增车型</el-button>
    </div>
    <div
      class="content"
      style="margin-left: 45px"
    >
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="id"
          label="车型编号"
          width="280"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="车辆类型"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="车型数量"
          width="130"
        >
        </el-table-column>
        <el-table-column
          prop="allowableLoad"
          label="应载重量(吨)"
          width=""
        >
        </el-table-column>
        <el-table-column
          prop="allowableVolume"
          label="应载体积(立方米)"
          width=""
        >
        </el-table-column>
        <el-table-column
          prop="measureLong"
          label="长(米)"
          width=""
        >
        </el-table-column>
        <el-table-column
          prop="measureWidth"
          label="宽(米)"
          width=""
        >
        </el-table-column>
        <el-table-column
          prop="measureHigh"
          label="高(米)"
          width=""
        >
        </el-table-column>
        <el-table-column
          text-align-center
          label="操作"
          width=""
          align="center"
        >
          <template #default="scope">
            <el-button
              type="text"
              class="edit"
              @click="editInfo(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              class="del"
              @click="delDialog(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="page-container">
      <el-pagination
        style="text-align: center;"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="+counts"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 添加&编辑组件 -->
    <CarModelsAdd
      ref="diaLog"
      @getList="getList"
    ></CarModelsAdd>
    <!-- 删除弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span style="margin-left: 30px;">确认要删除此条数据吗</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="warning"
          @click="delItem"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { list, del } from '@/api/transit'
import CarModelsAdd from './components/car-models-add.vue'
export default {
  components: {
    CarModelsAdd
  },
  data() {
    return {
      dialogVisible: false,
      params: {
        allowableLoad: '', // 载重
        allowableVolume: '', // 体积
        id: null,
        name: '', // 车辆类型名称
        page: 1, // 页码
        pageSize: 10 // 页尺寸
      },
      list: [], // 车辆列表
      total: 0, // 总页数
      counts: 0 // 总条数
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await list(this.params)
      this.list = res.data.items
      this.total = +res.data.pages
      this.counts = res.data.counts
    },
    // 页数发生变化时触发函数
    handleCurrentChange(num) {
      this.params.page = num
      this.getList()
    },
    addNewCar() {
      this.$refs.diaLog.dialogFormVisible = true
    },
    // 删除
    delDialog(id) {
      this.dialogVisible = true
      this.id = id
    },
    async delItem() {
      await del(this.id)
      this.$message.success('删除成功')
      this.id = null
      this.dialogVisible = false
      this.getList()
    },
    // 编辑
    editInfo(row) {
      this.$refs.diaLog.dataForm = row
      this.$refs.diaLog.dialogFormVisible = true
    },
    // 搜索
    doSearch() {
      this.params.page = 1
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.search-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px;
  background-color: #fff;
 .item {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-left: 30px;
  .search-label {
    width: 100px;
  }
  .search-main {
    width: 450px;
    margin-right: 10px;
  }
 }
}
.top {
    padding-left: 14px;
    height: 100px;
    line-height: 100px;
    background-color: #fff;
  }

  .edit {
    color: #419EFF;
  }

  .del {
    color: #F56C6C;
  }

  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
  .page-container{
    height: 200px;
  padding:4px 0px;
  text-align: right;
}
</style>
